<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}
		body {
			background-color: #f65050;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-around;
		}
		.container {
			width: 320px;
			height: 600px;
			border-radius: 36px;
			background-color: #ffffff;
			margin-top: 30px;
			position: relative;
		}
		.container .kuan {
			width: 82px;
			height: 12px;
			margin: 20px auto;
			/* border: 1px solid red; */
		}
		.kuan .c_kuan {
			width: 70px;
			height: 8px;
			border-radius: 3px;
			background-color: #d2d2d2;
			float: left;
		}

		.kuan .d_kuan {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #d2d2d2;
			float: right;
		}

		.container p {
			width: 260px;
			height: 20px;
			font-size: 12px;
			color: #85877c;
			margin: auto;
			margin-top: 45px;
			/* border: 1px solid red; */
		}
		.container text {
			font-size: 12px;
			color: #85877c;
		}

		.container .box {
			width: 260px;
			height: 75px;
			/* border: 1px solid red; */
			margin: 20px auto;
			/* line-height: 25px; */
			border-bottom: 1px solid #f8f8f8;
		}

		.box .mesg {
			width: 70%;
			height: 100%;
			/* border: 1px solid black; */
			float: left;
			color: #7f8384;
			font-size: 12px;
		}

		.mesg > .time {
			font-size: 20px;
			font-weight: 600;
		}

		/* 按钮触发栏 */
		.box .button {
			width: 28%;
			height: 100%;
			/* border: 1px solid black; */
			float: right;
			display: flex;
			text-align: center;
			align-items: center;
			justify-content: center;
		}

		/* 隐藏checkbox */
		.box #t1,
		#t2,
		#t3 {
			display: none;
		}

		.box .checkbox .fankuan {
			width: 40px;
			height: 16px;
			background-color: #eeeeee;
			border-radius: 5px;
			position: relative;
		}

		.box .button .checkbox .fankuan .cricle {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: #565656;
			position: absolute;
			bottom: 0px;
			left: 20px;
			transition: 0.5s;
		}
		/* .box .button .checkbox .fankuan:hover .cricle {
			background-color: #fefefe;
			left: 0px;
			transition: 0.5s;
		} */

		/* 下方提示栏 */
		.container .tip {
			width: 260px;
			height: 26px;
			/* border: 1px solid red; */
			/* position实现i定位要自身宽的一般-130px */
			left: 50%;
			margin-left: -130px;
			position: absolute;
			bottom: 20px;
			display: flex;
			justify-content: space-around;
			text-align: center;
		}

		.tip > div {
			width: 30%;
			font-size: 12px;
		}
		.tip > .act {
			border-bottom: 3px solid #80817c;
			color: #80817c;
		}

		.tip > .act:hover {
			border-bottom: 3px solid #eeeeee;
			color: #eeeeee;
		}
		.tip > .no_act {
			border-bottom: 3px solid #eeeeee;
			color: #eeeeee;
		}
		.tip > .no_act:hover {
			border-bottom: 3px solid #80817c;
			color: #80817c;
		}

		/* 勾选checkbox关联兄弟选择器，然后发生变化，名字是可以相同的 */
		.box input[name='test']:checked ~ .button .checkbox .fankuan .cricle {
			background-color: #fefefe;
			left: 0px;
			transition: 0.5s;
		}

		.box input[name='test']:checked ~ .mesg {
			color: #eeeeee;
		}
	</style>
	<body>
		<div class="container">
			<div class="kuan">
				<div class="c_kuan"></div>
				<div class="d_kuan"></div>
			</div>
			<p>你的闹钟</p>

			<div class="box">
				<input type="checkbox" name="test" id="t1" />
				<div class="mesg">
					<div>睡觉</div>
					<div class="time">08:00</div>
					<div>日，一，二，三，四</div>
				</div>
				<!-- 加入滑动按钮 -->
				<div class="button">
					<label for="t1" class="checkbox">
						<div class="fankuan">
							<div class="cricle"></div>
						</div>
					</label>
				</div>
			</div>

			<div class="box">
				<input type="checkbox" name="test" id="t2" />
				<div class="mesg">
					<div>吃饭时间</div>
					<div class="time">13:00</div>
					<div>每一天</div>
				</div>
				<!-- 加入滑动按钮 -->
				<div class="button">
					<label for="t2" class="checkbox">
						<div class="fankuan">
							<div class="cricle"></div>
						</div>
					</label>
				</div>
			</div>

			<div class="box">
				<input type="checkbox" name="test" id="t3" />
				<div class="mesg">
					<div>工作</div>
					<div class="time">16:30</div>
					<div>五、六</div>
				</div>
				<!-- 加入滑动按钮 -->
				<div class="button">
					<label for="t3" class="checkbox">
						<div class="fankuan">
							<div class="cricle"></div>
						</div>
					</label>
				</div>
			</div>

			<div class="tip">
				<div class="act">提醒</div>
				<div class="no_act">时钟</div>
				<div class="no_act">定时器</div>
			</div>
		</div>
	</body>
</html>
